<template>
  <div class="detailbox border">
    <div class="flexbox">
      <div class="shrinkbox_v2">
        设备编号
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput" 
        v-model="editData.serialNumber" placeholder="请输入设备编号"></el-input>
        <div v-else class="div_input">
          {{ editData.serialNumber }}
        </div>
      </div>
      <div class="shrinkbox_v2">
        运营商
      </div>
      <div class="contentbox_v2">
        <el-select v-if="!feildConfig.isReadonly"
        v-model="editData.isp" class="diyselect" placeholder="请选择运营商">
          <el-option
            v-for="(item, index) in isprange"
            :key="index"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div v-else class="div_input">
          {{ editData.isp }}
        </div>
      </div>
    </div>

    <!-- <div class="flexbox">
      <div class="shrinkbox_v2">
        上行宽带
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput" type="number"
        v-model="editData.upBandwidth" placeholder="请输入上行宽带"></el-input>
        <div v-else class="div_input">
          {{ editData.upBandwidth }}
        </div>
      </div>
      <div class="shrinkbox_v2">
        线路数量
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput" type="number"
        v-model="editData.lineNumber" placeholder="请输入线路数量"></el-input>
        <div v-else class="div_input">
          {{ editData.lineNumber }}
        </div>
      </div>
    </div> -->

    <div class="flexbox">
      <div class="shrinkbox_v2">
        所在省份
      </div>
      <div class="contentbox_v2">
        <el-select v-if="!feildConfig.isReadonly" @change="changeProvence"
        v-model="editData.provinceCode" class="diyselect" placeholder="请选择省份">
          <el-option
            v-for="(item, index) in provencerange"
            :key="index"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div v-else class="div_input">
          {{ editData.province }}
        </div>
      </div>
      <div class="shrinkbox_v2">
        所在城市
      </div>
      <div class="contentbox_v2">
        <el-select v-if="!feildConfig.isReadonly" v-model="editData.cityCode" class="diyselect" placeholder="请选择城市">
          <el-option
            v-for="(item, index) in cityrange"
            :key="index"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div v-else class="div_input">
          {{ editData.city }}
        </div>
      </div>
    </div>
    <div class="flexbox">
      <div class="shrinkbox_v2">
        具体地址
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput" type="textarea"
        v-model="editData.address" placeholder="街道、门牌号等"></el-input>
        <div v-else class="div_input">
          {{ editData.address }}
        </div>
      </div>
    </div>


  </div>
</template>

<script setup>
  import { ref, inject, defineEmits } from 'vue'
  import area from '@/assets/utils/city.json'
  // import { useStore } from 'vuex'
  // 注入全局utils工具js
  const $utils = inject('$utils')
  const editData = ref({})
  const feildConfig = ref({
    isReadonly: false
  })

  // 定义emit方法
  const emit = defineEmits()

  const optype = ref('')

  const provencerange = ref([])
  const cityrange = ref([])
  const isprange = ref([
    {
      value: '电信',
      label: '电信'
    }, {
      value: '移动',
      label: '移动'
    }, {
      value: '联通',
      label: '联通'
    }, {
      value: '其他',
      label: '其他'
    }
  ])

  // =========================================================

  function changeProvence (e) {
    cityrange.value = []
    editData.value.cityCode = ''
		let citys = area.find(item => item.code == e).children
		if (citys) {
			for (let i = 0; i < citys.length; i++) {
				cityrange.value.push({
					value: citys[i].code,
					label: citys[i].value
				})
			}
		}
  }

  // =========================================================


  function initData(obj) {
    optype.value = obj.type
    editData.value = obj.data ? obj.data : {}
    feildConfig.value = obj.feildConfig ? obj.feildConfig : feildConfig.value
    provencerange.value = []
		for (let i = 0; i < area.length; i++) {
			provencerange.value.push({
				value: area[i].code,
				label: area[i].value
			})
		}
    if (editData.value.province) {
      let tempProvence = area.find(
        item => item.value.indexOf(editData.value.province) >= 0
      )
      if (tempProvence) {
        editData.value.provinceCode = tempProvence.code
      } else {
        editData.value.provinceCode = ''
      }
      changeProvence(editData.value.provinceCode)
      if (editData.value.city) {
        editData.value.cityCode = cityrange.value.find(
          item => item.label.indexOf(editData.value.city) >= 0
        ).value
      } else {
        editData.value.cityCode = ''
      }
    } else {
      editData.value.provinceCode = ''
      editData.value.cityCode = ''
    }
  }

  function submitData() {
    if (editData.value.provinceCode) {
      editData.value.province = provencerange.value.find(
        item => item.value == editData.value.provinceCode
      ).label
    } else {
      editData.value.province = ''
    }
    if (editData.value.cityCode) {
      editData.value.city = cityrange.value.find(
        item => item.value == editData.value.cityCode
      ).label
    } else {
      editData.value.city = ''
    }
		$utils.post({
			url: optype.value == 'add'?'/Api/Device/Add':'/Api/Device/Edit',
			params: editData.value,
      showLoading: true,
			ok: (res) => {
				// console.log(res)
        emit('close-dialog', false)
			}
		})
  }

  defineExpose({
    initData,
    submitData
  })

</script>

<style scoped>
.saveBtn {
  background-color: #4999FA;
  color: #fff;
  font-weight: normal;
  font-size: 14px;
  padding: 3px 10px;
  border-radius: 3px;
  margin-right: 10px;
}
.saveBtn:hover {
  /* background-color: #7BB8FB; */
  opacity: 0.8;
  cursor: pointer;
}
.split_title {
  background-color: #EBEEF5;
  font-size: 16px;
  height: 30px;
  align-items: center;
  font-family: '楷体';
  font-weight: bold;
  display: flex;
  position: relative;
}
.split_title_content {
  flex-grow: 1;
  text-align: center;
}
.split_title_btn {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  align-items: center;
}
.shrinkbox_v2 {
  width: 70px;
}
  .diyinput :deep(.el-input__wrapper){
    border: 0 !important;
    outline: none;
    box-shadow: none;
    font-size: 12px;
  }
.diyselect :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
  /* pointer-events: none; */
}
.diyselect :deep(.el-input__wrapper:hover){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.diyselect :deep(.el-input__wrapper:active){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.diyselect :deep(.el-select__wrapper) {
  box-shadow: unset !important;
}
.diyinput :deep(.el-textarea__inner){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
}
.diydatepicker :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
}
.diyformitem {
  margin-bottom: 0;
}
.diydatapicker :deep(.el-date-editor){
  width: 100%;
}
.diydatapicker :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.diyinput :deep(.el-input-group__append){
  border: 0 !important;
  outline: none;
  background-color: unset;
  box-shadow: none;
  padding: 0 10px 0 5px;
  font-weight: bold;
  font-size: 16px;
}
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/ input[type='number'] {
  -moz-appearance: textfield;
}
</style>